<template>
    <div>
        <el-card class="box-card">
            <h2>审批合同</h2>
            <el-form :model="approveForm" ref="approveForm" :rules="rules" label-width="120px">
                <el-form-item label="合同名称：" prop="name">
                    <el-input v-model="approveForm.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="客户：" prop="customer">
                    <el-input v-model="approveForm.customer" readonly></el-input>
                </el-form-item>
                <el-form-item label="开始时间：" prop="beginTime">
                    <el-input v-model="approveForm.beginTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="结束时间：" prop="endTime">
                    <el-input v-model="approveForm.endTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="合同内容：" prop="content">
                    <el-input v-model="approveForm.content" type="textarea" :rows="10" readonly></el-input>
                </el-form-item>
                <el-form-item label="审批意见：" prop="opinion">
                    <el-input v-model="approveForm.opinion" type="textarea" :rows="5"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="approve('通过')">通过</el-button>
                    <el-button type="danger" @click="approve('拒绝')">拒绝</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            approveForm: {
                name: this.$route.params.contractName,
                customer: '',
                beginTime: '',
                endTime: '',
                content: '',
                opinion: ''
            },
            rules: {
                opinion: [{ required: true, message: '请输入审批意见', trigger: 'blur' }]
            },
            approvalStatus: '' // 用于记录当前的审批状态
        };
    },
    created() {
        const contractName = this.$route.params.contractName;
        this.fetchContractDetails(contractName);
    },
    methods: {
        fetchContractDetails(contractName) {
            this.axios.get(`/api/contract/name/${contractName}`)
                .then(response => {
                    const contract = response.data.data;
                    this.approveForm.name = contract.name;
                    this.approveForm.customer = contract.customer;
                    this.approveForm.beginTime = contract.beginTime;
                    this.approveForm.endTime = contract.endTime;
                    this.approveForm.content = contract.content;
                })
                .catch(error => {
                    console.error('Error fetching contract details:', error);
                    this.$message.error('获取合同详情失败');
                });
        },
        approve(status) {
            this.approvalStatus = status === '通过' ? 'approved' : 'rejected';
            this.$refs.approveForm.validate(valid => {
                if (valid) {
                    this.submitForm();
                } else {
                    this.$message.error('请填写审批意见');
                }
            });
        },
        submitForm() {
            const contractName = this.$route.params.contractName;
            this.axios.post(`/api/contract/name/${contractName}/approve`, {
                opinion: this.approveForm.opinion,
                status: this.approvalStatus
            })
                .then(() => {
                    this.$message({
                        message: `合同审批${this.approvalStatus === 'approved' ? '通过' : '拒绝'}成功`,
                        type: 'success'
                    });
                    this.$router.push('api/approval_contract'); // 返回审批合同列表
                })
                .catch(error => {
                    console.error('Error approving contract:', error);
                    this.$message.error(`合同审批${this.approvalStatus === 'approved' ? '通过' : '拒绝'}失败`);
                });
        },
        resetForm() {
            this.$refs.approveForm.resetFields();
        }
    }
};
</script>

<style scoped>
.box-card {
    margin: auto;
    width: 600px;
}
.el-form-item {
    margin-bottom: 20px;
}
</style>
